<template>
    <div>
        <div v-for="(item, index) in newsList" :key="index">
            <van-card :title="item.title" :thumb="item.titleImg" @click="goDetail(item)">
                <template #price-top></template>
                <template #desc>
                    <div class="descStyle">{{ item.context }}</div>
                </template>
                <template #bottom>
                    <div class="bottomStyle">{{ item.date }}</div>
                </template>
            </van-card>
        </div>
        <div style="height: 120px;width: 100%;"></div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { getNewsByTask } from '@/api/learn.js';
import { useRouter } from 'vue-router';
const emit = defineEmits(['modifyActive'])
const router = useRouter();
const taskId = localStorage.getItem('taskId')
const newsList = ref([])


onMounted(() => {
    emit("modifyActive","learn")
    getNewsByTaskList()
})


function getNewsByTaskList() {
    getNewsByTask(taskId).then(res => {
        if (res.code == 200) {
            newsList.value = res.data
            console.log(newsList.value)
        }
    })
}

function goDetail(item) {
    router.push(`/learn/learnDetail/${item.id}`)
}
</script>
<style lang="less" scoped>
/deep/ .van-card {
    border-bottom: 1px solid #efefef;
    margin-top: 10px;
}

.bottomStyle {
    color: var(--van-card-desc-color);
    text-align: right;
}

.descStyle {
    color: var(--van-card-desc-color);
    line-height: var(--van-card-desc-line-height);
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-break: anywhere;
    -webkit-box-orient: vertical;
}
</style>